var body = document.body;
var id = 0;
var PAGE = 1;
var content = "";
var questions = [];
var CHINESENUMBER=["一.","二.","三.","四.","五.","六.","七.","八.","九.","十."];//最多十题
var questionTypes=["","单选题","多选题","判断题","填空题","简答题","程序设计题"];
var helpArray=new Array(100);
var BigTitleNumber=0;
var QUESTIONTYPE=-1;
var subjectName="";
var totalGrade=0,gradeNumber=0;
var aboutGrades=[];//第一项数据无用
var QNUM=0;
$(document).ready(function () {
    for(var i = 0 ;i<100;i++){
        helpArray[i]=false;
    }
    /*var innerHtml = "<div><div>Java语言支持：</div><form>"
        + "<input type=\"radio\"></input>（A）单继承"
        + "<input type=\"radio\"></input>（B）多继承"
        + "<input type=\"radio\"></input>（C）单继承和多继承都支持"
        + "<input type=\"radio\"></input>（D）单继承和多继承都不支持"
        + "</form></div>";
    var innerHtml2 = '<p>This is a paragraph</p>';
    var innerHtml3 = "<div class=\"picture\">\n" +
        "<p>选择题带图片</p>"+
        "    <div><img src=\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545982992568&di=b175024db515ac12fb1896679f13d3d7&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F03%2F08%2F8488a56c18beb1d51ec7a1a2bbc2617a.jpg\" alt=\"1.jpg\"></img></div>\n" +
        "    <div><img src=\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545982992568&di=b175024db515ac12fb1896679f13d3d7&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F03%2F08%2F8488a56c18beb1d51ec7a1a2bbc2617a.jpg\" alt=\"1.jpg\"></img></div>\n" +
        "    <div><img src=\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545982992568&di=b175024db515ac12fb1896679f13d3d7&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F03%2F08%2F8488a56c18beb1d51ec7a1a2bbc2617a.jpg\" alt=\"1.jpg\"></img></div>\n" +
        "    <div><img src=\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545982992568&di=b175024db515ac12fb1896679f13d3d7&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F03%2F08%2F8488a56c18beb1d51ec7a1a2bbc2617a.jpg\" alt=\"1.jpg\"></img></div>\n" +
        "</div>";
    var innerHtml4 = "“九合一”选举，国民党籍候选人韩国瑜“攻占”高雄，打破了民进党20年的“治理神话”。自当选以来，这位新任市长的两岸政策就备受瞩目。\n";
    var innerHtml5 ="12月25日，韩国瑜白天西装笔挺在爱河举行就职典礼，晚上兑现竞选承诺，恢复“卖菜郎”本色，夜宿菜市场。他当天还在高雄市政府接受了台湾中天电视台《新闻深喉咙》主持人平秀琳的专访，称自己无时无刻不在想如何为高雄拼经济，强调要“两岸一家亲，亲上加亲”，他上任后就将开展与大陆城市的交流，首选深圳。";
    var innerHtml6 = "此外，他还提到广州、厦门这两个大陆南方城市。“东南西北中，发财到广东，广州人有钱，购买力强啊，我们也不排斥，”韩国瑜说，还有福建厦门，“大部分的台湾闽南人祖先都来自福建，我们跟厦门有共同的语言，共同的文化，甚至共同的祖先，立刻就可以愉快地结合在一起，我们都不排斥。”\n" +
        "\n" +
        "“歪嘴鸡没资格挑米吃。”韩国瑜自嘲道，高雄现在很需要建设经济，只要愿意跟我们来往，我们都很乐意，都非常欢迎，“我们的心中没有围墙。”\n" +
        "\n" +
        "在两岸政策上，韩国瑜在采访中再次强调“两岸一家亲”，奉劝民进党不要“与民意为敌”，阻拦城市间的交流和经济往来，这样做是愚蠢的。";

    cnt = 30;//30次循环加入内容
    while (cnt > 0) {
        addQuestionIntoDiv(PAGE, innerHtml4);
        addQuestionIntoDiv(PAGE, innerHtml5);
        addBlankIntoDiv(PAGE, 50);
        if(cnt%10==5) addPictureElementIntoDiv(PAGE,innerHtml3,80);
        addQuestionIntoDiv(PAGE,innerHtml6);
        cnt--;
    }*/
    //得到试卷抬头
    axios.post('/getPdf/getTotalName').then(function(value){
        console.log("value.data"+value.data);
        //val() 不能对div 或span赋值 html可以
        console.log(value.data[0]);
        $("#semester").html(value.data[0]);
        $("#subject").html(value.data[1]); //这个因为最后没有都使用书名号，但改动太大，第二行subject元素可能为空
        // var begin = value.data[1].indexOf("《");
        // var end = value.data[1].indexOf("》");
        // subjectName = value.data[1].substring(begin+1,end);
        // console.log("subjectName"+subjectName);
    }).catch();


    //得到所有题目
    axios.post('/getPdf/getAllQuestions')
        .then(function (value) {
            //console.log(value);//返回的是 一个 [{}，{}]对象的数组
            for(x in value.data){//x是下标
                if(value.data[x].type!==QUESTIONTYPE){
                    QUESTIONTYPE=value.data[x].type;
                    helpArray[x]=true;//每次为true 说明题型变化了
                    aboutGrades.push({total:totalGrade,number:gradeNumber});
                    console.log("push进aboutGrades了");
                    totalGrade=0;
                    gradeNumber=0;
                }
                console.log("grade"+value.data[x].grade);
                totalGrade+=value.data[x].grade;//题型总分
                gradeNumber++;//当前题型有多少题
                questions.push(value.data[x]);//questions[i].height\content
            }
            aboutGrades.push({total:totalGrade,number:gradeNumber});
            //添加题目
            for(var i=0;i<questions.length;i++){
                if(helpArray[i]==true){
                    addQuestionTitle(PAGE,CHINESENUMBER[BigTitleNumber]+questionTypes[questions[i].type],BigTitleNumber+1);
                    BigTitleNumber++;
                    console.log("addTitle");
                }
                if(questions[i].height!==0&&questions[i].content==""){
                    addBlankIntoDiv(PAGE,questions[i].height);//加留白 指定高度
                }else if(questions[i].height!==0&&questions[i].content!=""){
                    addFixedHeightElementIntoDiv(PAGE,questions[i].content,questions[i].height);//加图片要有高度值
                }
                else{
                    addQuestionIntoDiv(PAGE,questions[i].content);//不需要高度值但需要content的文字题
                }
            }
            content = document.documentElement.innerHTML;//异步问题，这里操作
            // console.log(content);//得到的 html 是js 执行后的代码但只包含 <head> </head> 和 <body/> <body>+script 三部分剩余部分 后端java 添加
            //xxx试卷 第几页 共几页：
            $(".bottom_bar").each(function(i){
                $(this).html(subjectName+"试卷 （第"+(i+1)+"页 共"+PAGE+"页）")
            });

            setTimeout(conformGeneratePDF,3000);
        }).catch(function (reason) {
        console.log(reason);
    });
    function conformGeneratePDF(){
        if(confirm("是否生成PDF？")){
            window.print();
        }
        else{
            alert("你选择了取消");
            setTimeout(closeWindow,1000);
        }
        function closeWindow(){
            window.close();
        }
    }
    //content = document.documentElement.innerHTML;
    //console.log(content);//得到的 html 是js 执行后的代码但只包含 <head> </head> 和 <body/> <body>+script 三部分

    //剩余部分 后端java 添加

    // $("#btn").submit(function (event) {
    //     event.preventDefault();
    //     fire_ajax_submit();
    // });
    /*$("#btn").click(function (event) {
        event.preventDefault();
        //fire_ajax_submit();
        window.print();
    });*/


});


// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.

function checkOverflow(el) {
    var curOverflow = el.style.overflow;

    if (!curOverflow || curOverflow === "visible")
        el.style.overflow = "hidden";
    //先让溢出效果为 hidden 这样才可以比较 clientWidth和scrollWidth

    var isOverflowing = el.clientHeight  < el.scrollHeight; //加 得分那边会有影响，所以不要宽度的判断

    el.style.overflow = curOverflow;

    return isOverflowing;//不满返回false
}
function addQuestionTitle(page,content,number){
    addElementIntoDiv(page,"<h4 style=\"float:left;\">"+content+"(共"+aboutGrades[number].total+"分)</h4>",true);//分数框是false
    addScoreIntoDiv(page);//如果题目右边要加分数框
}
//针对 除题目外的 任意标签，可用此函数  题目用 addQuestionIntoDiv
function addElementIntoDiv(page, innerHTML,isTitle) {
    
    
    //page 为全局变量
    //为 大的题型（一、选择题） 或分数框时 分数框 需要id 来溢出删除 isTitle=false 表分数框 true表大体型 null表普通题
    if(isTitle==null||isTitle==false){
        id++;//全局变量，保证id 唯一性 不是标题 而是题目才加 没有传值时为null
    }

    var div = document.createElement("div");
    //var innerHTML = "<p>this is a paragraph</p>";
    if(isTitle==null){
        QNUM++;
        div.innerHTML = "<span style=\"float:left;\">"+QNUM+".</span>"+innerHTML;//每道题前加入题号
    }else{
        div.innerHTML = innerHTML;//每道题前加入题号
    }
    if(isTitle!==true){
        //大题型不需要id
        div.setAttribute("id", id);
    }else{
        div.setAttribute("id","bigTitle"+id);
    }
    // console.log("page" + page);
    var side_div = document.getElementById("page" + page);
    side_div.appendChild(div);

    if (checkOverflow(side_div)) {
        var lastNode;
        if(isTitle){//最后加入的节点可能是 标题，也可能是题目
           lastNode = document.getElementById("bigTitle"+id);
        }else{
            lastNode = document.getElementById(id);
        }
        side_div.removeChild(lastNode);//因为是溢出后才停止的，所以添加id 移除最后一个加入的节点。
        if(isTitle==null || isTitle===false){
            id--;
        }
        console.log("div不够了，溢出了，将添加到下一个div内");
        page++;
        PAGE = page;//全局变量PAGE也要同步
        if (page >= 3 && page % 2 == 1) {
            //生成一整张的考试卷子；
            addNewPaper(page);//比如生成3、4 两页
            addElementIntoDiv(page, innerHTML,isTitle);
        } else {
            //添加到右侧的 right_div
            addElementIntoDiv(page, innerHTML,isTitle);
        }
        return;
    }
}
function addQuestionIntoDiv(page,innerHTML){

    addElementIntoDiv(page,innerHTML);//加元素内容
}
//照片元素必须指定高度 =-==这个过期了
function addFixedHeightElementIntoDiv(page,innerHTML,span){
    var innerHTML = "<div style=\"height: " + span + "px;\">"+innerHTML+"</div>";//
    addElementIntoDiv(page, innerHTML)
}
//添加空白
function addBlankIntoDiv(page, span) {
    var innerHTML = "<div style=\"height: " + span + "px;border: 1px solid;\">这是间隔</div>";//
    addElementIntoDiv(page, innerHTML)
}
function addScoreIntoDiv(page){
    //span 默认是1em
    var innerHTML =
        "<div style=\"width:100%;height:3em;margin-bottom:2px\">"+
        "<div class=\"score\">" +
            "<div>得分</div>" +
            "<div style=\"border-left:0;width:40px\"></div>" +
        "</div></div>";
    // var div = document.createElement("div");
    // div.setAttribute("style", "width:100%;height:1.7em;margin-bottom:2px");
    // div.innerHTML = innerHTML;
    // var side_div = document.getElementById("page" + page);
    // side_div.appendChild(div);
    addElementIntoDiv(PAGE,innerHTML,false);
}

function addNewPaper(page) {
    console.log("新增了一整张试卷");
    var div = document.createElement("section");//div 变 section
    div.setAttribute("class", "whole_page");//设置为一整页
    var left_page = document.createElement("div");
    var right_page = document.createElement("div");
    left_page.setAttribute("style", "position:relative;float:left;width:50%;height:100%");
    right_page.setAttribute("style", "position:relative;float:right;width:50%;height:100%");
    //设置左右两页的属性，直接赋值class 即可
    // left_page.setAttribute("class",left_page);
    // right_page.setAttribute("class",right_page);
    //添加 第几页 的 bottom_bar
    var bottom_bar = document.createElement("div");
    bottom_bar.setAttribute("class", "bottom_bar");
    bottom_bar.innerText = "第" + page + "页";//左
    left_page.appendChild(bottom_bar);
    var bottom_bar2 = document.createElement("div");
    bottom_bar2.setAttribute("class", "bottom_bar");
    bottom_bar2.innerText = "第" + (page + 1) + "页";//右
    right_page.appendChild(bottom_bar2);

    var new_left_div = document.createElement("div");
    new_left_div.setAttribute("id", "page" + page);//如：page3
    new_left_div.setAttribute("style", "position:absolute;width:85%;height:90%;top:6%;left:11%;");
    var new_right_div = document.createElement("div");
    new_right_div.setAttribute("id", "page" + (page + 1));//如：page4
    new_right_div.setAttribute("style", "position:absolute;width:85%;height:90%;top:6%;left:11%;");
    left_page.appendChild(new_left_div);
    right_page.appendChild(new_right_div);
    div.appendChild(left_page);
    div.appendChild(right_page);
    body.appendChild(div);
}



